<template>
  <div>
    <!-- 登录 -->
    <!-- 登录页面 -->

    <head-page title="4001-1921-7-1" id="backstyle"></head-page>
    <div class="top">
      <img src="../../assets/lo-go.png" alt="" />
      <div class="span">欢迎登录</div>
    </div>

    <!-- Form 表单 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        label="手机号"
        placeholder="手机号"
        :rules="[
          { required: true, message: '请填写您的手机号码！' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '手机号码格式错误！',
          },
        ]"
        @blur="funa()"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
        @blur="funb()"
      />
      <div class="tips fsc">
        <!-- <router-link to="/resetpassword">忘记密码</router-link> -->
        <router-link to="/register">去注册</router-link>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登 &nbsp;&nbsp;&nbsp;录</van-button
        >
      </div>
    </van-form>
  </div>
</template>
  
  <script>
// 用请求，先引用请求
// 引入rant Notify 消息提示
import { Notify, Dialog } from "vant";
import { login } from "@/api/login";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      login(values.username, values.password).then((res) => {
        if (res.data.code == 200) {
          Dialog.alert({
            title: "登录",
            message: "登录成功啦",
          }).then(() => {
            sessionStorage.setItem("token", res.data.data.token),
              sessionStorage.setItem("userId", res.data.data.userId),
              sessionStorage.setItem("userName", res.data.data.userName),
              sessionStorage.setItem("userTel", res.data.data.userTel);
            sessionStorage.setItem("uid", res.data.data.uuid);
            this.$router.push("/home");
          });
        } else {
          Notify({ type: "danger", message: "登录失败" });
        }
      });
    },
    //判断账号是否被注册
    funa() {
      // login(this.username, this.password).then((res) => {
      //   console.log(res);
      //   if (res.data.code == 10010) {
      //     Notify({ type: "danger", message: "该用户不存在" });
      //   }
      // })
    },
    // 判断 密码是否正确
    funb() {
      //     login(this.username, this.password).then((res) => {
      //       console.log(res);
      //       if (res.data.code == 10010) {
      //         Notify({ type: "danger", message: "该密码错误" });
      //       }
      //     })
      //   }
    },
  },
};
</script>
  
  
  <style scoped>
.top {
  width: 100%;
  font-size: 0.16rem;
  height: 1.5rem;
  color: black;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.top .span {
  font-size: 0.19rem;
}

.top img {
  width: 0.6rem;
  /* margin: 0.5rem 0.1rem 1rem; */
}
.tips {
  margin-top: 0.2rem;
  padding: 0 0.16rem;
}
.tips a {
  font-size: 0.16rem;
  color: #000;
}
.van-button {
  height: 0.33 rem;
}
.van-button__text {
  font-size: 0.2rem;
}
</style>